<template>
  <div class="pagestyle">
    <topbottomCom :optionsquery="1">
      <template v-slot:dragTopSlot>
        <list_controller :showCaozuo="state.showCaozuo" @query="query" ref="zujianname" :options="state.options"
          @cellClickEvent="cellClickEvent">
          <template v-slot:opraCurdBtnAll>
            <span :class="
                state.listBtnType == 1 ? 'listInfoBtn active' : 'listInfoBtn'
              " @click="listInfoBtnClick(1)">
              <svg-icon :class="state.listBtnType == 1 ? 'active' : ''" class-name="search-icon" icon-class="qiehuan" />
              实时放电
            </span>
            <span :class="
                state.listBtnType == 3 ? 'listInfoBtn active' : 'listInfoBtn'
              " @click="listInfoBtnClick(3)">
              <svg-icon :class="state.listBtnType == 3 ? 'active' : ''" class-name="search-icon" icon-class="dayin" />
              打印
            </span>
            <span :class="
                state.listBtnType == 4 ? 'listInfoBtn active' : 'listInfoBtn'
              " @click="listInfoBtnClick(4)">
              <svg-icon :class="state.listBtnType == 4 ? 'active' : ''" class-name="search-icon" icon-class="xiazai" />
              下载
            </span>
            <div class="xiazai" v-if="state.showDownload && state.listBtnType == 4">
              <div class="item" @click="downloadFn(1)">下载当前页</div>
              <div class="item" @click="downloadFn(2)">下载全部页</div>
            </div>
          </template>
          <template v-slot:selectNamelist> 历史放电 </template>
        </list_controller>
      </template>
      <template v-slot:dragBottomSlot>
        <list_controller ref="zujiannametwo" :options="state.optionstwo" @pagechange="pagechange">
          <template v-slot:opraCurdBtnlist="row">
            <span>
              <el-button class="tableFontSize" type="primary" link size="small" @click="lookBtn(row.row.row)">填写分析
              </el-button>
              <el-button class="tableFontSize" type="primary" link size="small" @click="editBtn(row.row.row)"
                v-if="row.row.row.templateDto != null">查看分析</el-button>
            </span>
          </template>
          <template v-slot:opraCurdBtnAll>
            <span :class="
                state.listBtnType == 2 ? 'listInfoBtn active' : 'listInfoBtn'
              " @click="listInfoBtnClick(2)">
              <svg-icon :class="state.listBtnType == 2 ? 'active' : ''"
               class-name="search-icon" icon-class="quxian-g77hanc6" />
              查看曲线
            </span>
            <span :class="
                state.listBtnType == 5 ? 'listInfoBtn active' : 'listInfoBtn'
              " @click="listInfoBtnClick(5)">
              <svg-icon :class="state.listBtnType == 5 ? 'active' : ''" class-name="search-icon" icon-class="dayin" />
              打印
            </span>
            <span :class="
                state.listBtnType == 6 ? 'listInfoBtn active' : 'listInfoBtn'
              " @click="listInfoBtnClick(6)">
              <svg-icon :class="state.listBtnType == 6 ? 'active' : ''" class-name="search-icon" icon-class="xiazai" />
              下载
            </span>
            <div class="xiazai" v-if="state.showDownload && state.listBtnType == 6">
              <div class="item" @click="downloadFn(3)">下载当前页</div>
              <div class="item" @click="downloadFn(4)">下载全部页</div>
            </div>
          </template>
          <template v-slot:selectNamelist> 详细信息(总计) </template>
        </list_controller>
      </template>
    </topbottomCom>
    <!-- 填写分析 -->
    <fillayaCom :fillayaComShow="state.fillayaComShow" @submitFormfillayaCom="submitFormfillayaCom" :status="'D'">
    </fillayaCom>
    <!-- 查看曲线 -->
    <chartCom :openChart="state.showChart" :data="state.chartData" @closeChart="closeChart">
    </chartCom>
    <!-- 查看分析 -->
    <ayadetailCom :detailsList="state.detailsList" :detailsShow="state.detailsShow"></ayadetailCom>
  </div>
</template>
<script setup>
  import querybox from "@/components/commonCom/querybox"; //用于首页抽屉查询处理
  import topbottomCom from "./listCom/topbottomCom.vue";
  import list_controller from "@/components/commonCom/list_controller";
  import fillayaCom from "./listCom/fillayaCom.vue";
  import ayadetailCom from "./listCom/ayadetailCom.vue";
  import chartCom from "./listCom/chartCom.vue";
  import {
    computed,
    nextTick,
    onMounted,
    reactive
  } from "vue";
  import {
    table_headers
  } from "@/components/commonCom/table_headers";
  import axios from "@/utils/request";
  import usePagesStore from "@/store/modules/pages";
  import {
    ElMessage,
    ElMessageBox,
    ElNotification
  } from "element-plus";
  import dayjs from "dayjs";
  import {
    searchareaTree
  } from "@/api/config";
  const {
    proxy
  } = getCurrentInstance();
  const store = usePagesStore();
  const router = useRouter();
  let previewHttps =
    import.meta.env.VITE_APP_HTTP;
  const upload = ref(null);
  let state = reactive({
    detailsShow: false,
    detailsList: [],
    tempList: [],
    fillayaComShow: false, //控制填写分析抽屉显示
    listBtnType: undefined,
    options: {
      tableheads: computed(() => table_headers.hisPointPrealarm),
      queryList: {
        queryTitle: '选择测点',
        querys: [{
            fieldsearch: "conditionType",
            field: "conditionType",
            title: "查询方式",
            type: "radiospecial",
            binddata: 1,
            options: [{
                label: "时间查询",
                value: 1,
              },
              {
                label: "班次查询",
                value: 2,
              },
            ],
          },
          {
            field: ["prealarmStartTime", "prealarmEndTime"],
            fieldsearch: ["prealarmStartTime", "prealarmEndTime"],
            title: "时间范围",
            col: 12,
            type: "datetimestartEnd",
            binddata: [dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format(
              'YYYY-MM-DD HH:mm:ss')],
            typespecial: 2,
            show: false,
          },
          {
            field: "datetime",
            fieldsearch: "datetime",
            title: "日期",
            type: "datetime",
            binddata: dayjs().format('YYYY-MM-DD'),
            typespecial: 1,
            show: true,
          },
          {
            fieldsearch: "banci",
            field: "banci",
            title: "班次选择",
            type: "selectspecial",
            binddata: "",
            options: [],
            typespecial: 1,
            show: true,
          },
          {
            field: "area",
            title: "所在区域",
            type: "cascaderRadionarmal",
            binddata: "",
            options: [],
            props: {
              children: "childList",
              value: "areaName",
              label: "areaName",
              checkStrictly: true,
              emitPath: false,
            },
          },
          {
            field: "condition",
            title: "测点类型",
            type: "cascaderRadio",
            binddata: "",
            options: [],
            props: {
              children: "children",
              value: "code",
              label: "name",
              checkStrictly: true,
              emitPath: false,
            },
          },
          {
            fieldsearch: ["sensorName", "pointId", "place"],
            field: ["sensorName", "pointId", "place"],
            title: "选择测点",
            type: "cascaderRadioSpecial",
            binddata: "",
            options: [],
            props: {
              children: "children",
              value: "commonField",
              label: "commonField",
              checkStrictly: true,
              emitPath: false,
            },
          },

          {
            field: "durationNum",
            title: "电源名称",
            type: "select",
            binddata: "",
            options: [{
              label: '10秒',
              value: 10
            }, {
              label: '30秒',
              value: 30
            }, {
              label: '1分钟',
              value: 60
            }, {
              label: '5分钟',
              value: 300
            }, {
              label: '10分钟',
              value: 600
            }, {
              label: '30分钟',
              value: 1800
            }, {
              label: '1小时',
              value: 3600
            }, {
              label: '3小时',
              value: 10800
            }, {
              label: '5小时',
              value: 18000
            }, {
              label: '10小时',
              value: 36000
            }, {
              label: '20小时',
              value: 72000
            }, {
              label: '1天',
              value: 86400
            }, {
              label: '3天',
              value: 259200
            }, {
              label: '10天',
              value: 864000
            }, {
              label: '30天',
              value: 2592000
            }],
          },
          {
            field: "durationNum",
            title: "充放电",
            type: "input",
            binddata: "",
          }
        ],
      },
      dataUrl: "/hisPointPrealarm/listPointPrealarm",
    },
    optionstwo: {
      queryList: {
        detailListSear: true,
        autoSearch: true,
        querys: [],
      },
      tableheads: computed(() => table_headers.hisPointPrealarmDetail),
      dataUrl: "/hisPointPrealarm/listPointDetailPrealarm",
    },
    editId: undefined,
    banciList: [],
    showDownload: false,
    showCaozuo: true,
    data: {},
    areaObj: {},
    descObj: {},
    showChart: false,
    chartData: {},
  });

  // 下载列表内容
  const downloadFn =async (n) => {
    state.showDownload = false
    state.listBtnType = undefined;
    if (n == 1) {
      proxy.$refs['zujianname'].vxe.xGrid.exportData({
        filename: '当前页下载数据',
        sheetName: 'Sheet1',
        type: 'xlsx',
      })
    } else if (n == 2) {
     await proxy.$refs.zujianname.getAllData(state.descObj);
      setTimeout(() => {
        proxy.$refs['zujianname'].vxe.xGrid.exportData({
          filename: '全部页下载数据',
          sheetName: 'Sheet1',
          type: 'xlsx',
          data: proxy.$refs['zujianname'].state.allData
        })
      }, 100);
    } else if (n == 3) {
      proxy.$refs['zujiannametwo'].vxe.xGrid.exportData({
        filename: '当前页下载数据',
        sheetName: 'Sheet1',
        type: 'xlsx',
      })
    } else if (n == 4) {
     await proxy.$refs.zujiannametwo.getAllData(state.descObj);
      setTimeout(() => {
        proxy.$refs['zujiannametwo'].vxe.xGrid.exportData({
          filename: '全部页下载数据',
          sheetName: 'Sheet1',
          type: 'xlsx',
          data: proxy.$refs['zujiannametwo'].state.allData
        })
      }, 100);
    }
  }
  // 打印顶部内容模板
  const topHtml = `
  <h1 class="title">历史馈电异常</h1>
  `
  // 打印样式
  const printStyle = `
  .title {
    text-align: center;
  }
  `
  // 打印列表内容
  const printList = (n) => {
    if (n == 1) {
      proxy.$refs['zujianname'].vxe.xGrid.print({
        style: printStyle,
        beforePrintMethod: ({
          content
        }) => {
          return topHtml + content
        }
      })
    } else if (n == 2) {
      proxy.$refs['zujiannametwo'].vxe.xGrid.print({
        style: printStyle,
        beforePrintMethod: ({
          content
        }) => {
          return topHtml + content
        }
      })
    }
  }
  // 填写分析抽屉
  function lookBtn(row) {
    state.editId = row.id;
    state.fillayaComShow = dayjs().unix();
  }
  // 提交填写分析
  function submitFormfillayaCom(data) {
    let dataObj = {};
    dataObj.id = state.editId;
    dataObj.templateDto = data;
    if (data) {
      axios.post("/hisPointPrealarm/modifyRealPointTemplate", dataObj).then((res) => {
        proxy.$modal.msgSuccess(res.msg);
        state.fillayaComShow = false;
        proxy.$refs.zujiannametwo.getData({
          ...state.descObj
        });
      });
    } else {
      state.fillayaComShow = false;
    }
  }

  function listInfoBtnClick(type) {
    state.listBtnType = type;
    if (type == 1) {
      goPage()
    }
    if (type == 2) {
      if (store.records.length == 0 || store.records.length > 1) {
        ElMessage.error('请选择一个测点')
        state.listBtnType = undefined;
        return
      } else {
        state.showChart = !state.showChart
        state.chartData = {
          pointIds: [store.records[0].pointId],
          queryStartTime: store.records[0].prealarmStartTime,
          queryEndTime: store.records[0].prealarmEndTime,
        }
      }
    }
    if (type == 3) {
      printList(1)
    }
    if (type == 4) {
      state.showDownload = !state.showDownload
    }
    if (type == 5) {
      printList(2)
    }
    if (type == 6) {
      state.showDownload = !state.showDownload
    }
  }
  // 编辑按钮
  function editBtn(row) {
    if (row.templateDto != null) {
      state.detailsShow = dayjs().unix();
    }
    state.detailsList = row.templateDto;
  }

  function cellClickEvent(row) {
    store.records=[]
    state.data = row
    state.descObj.pointId = row.pointId
    proxy.$refs.zujiannametwo.getData({
      ...state.descObj
    });
  }

  function pagechange() {
    proxy.$refs.zujiannametwo.getData({
      ...state.descObj
    });
  }

  function query(type) {
    if (type == 2) {
      proxy.$refs.zujiannametwo.state.tabledata = []
      getconditionList({})
    }
    if (type.type == 4) {
      state.options.queryList.querys.forEach((item) => {
        if (item.field == "condition") {
          state.areaObj['condition'] = type.val
          item.binddata = type.val
        }
      });
      getconditionList(state.areaObj);
    }
    if (type.type == 44) {
      state.options.queryList.querys.forEach((item) => {
        if (item.type == 'cascaderRadioSpecial') {
          if (item.binddata == '' || !item.binddata) {
            state.areaObj['areaName'] = type.val1
            getconditionList(state.areaObj);
          }
        }
      })
    }
    if (type.type == 5) {
      let dataObj = {
        dateSuffix: undefined,
        classInfo: {},
      };
      state.options.queryList.querys.forEach((item) => {
        if (type.val1) {
          dataObj.dateSuffix = type.val1
          if (item.fieldsearch == "banci") {
            state.banciList.forEach((itemsub) => {
              if (itemsub.id == item.binddata) {
                dataObj.classInfo = itemsub;
                dataObj.typeLabel=2
                banciList(dataObj);
              }
            });
          }
        } else {
          if (item.fieldsearch == "datetime") {
            dataObj.dateSuffix = item.binddata;
          }
        }
        if (item.fieldsearch == "banci") {
          state.banciList.forEach((itemsub) => {
            if (type.val == 0) {
              type.val = state.banciList[0].id
            }
            if (itemsub.id == type.val) {
              dataObj.classInfo = itemsub;
              dataObj.typeLabel=2
              banciList(dataObj);
            }
          });
        }
      });
    }
    if (type.type == 'topConnectBom') {
      state.descObj = type.data
      proxy.$refs.zujiannametwo.state.tabledata = []
    }
  }

  function getbanciList() {
    axios.post("/class/info/searchAll", {}).then((res) => {
      state.banciList = res.data.list;
      state.options.queryList.querys.forEach((item) => {
        if (item.fieldsearch == "banci") {
          item.options = res.data.list.map((item) => {
            return {
              label: item.className,
              value: item.id,
            };
          });
          item.binddata = item.options[0].value
        }
      });
    });
  }
  getbanciList();

  function banciList(dataObj) {
    axios.post("/hisPointFeed/handleClassInfo", dataObj).then((res) => {
      state.options.queryList.querys.forEach((item) => {
        if(dataObj.typeLabel!=2||state.options.queryList.querys[0].binddata==2){
          if (item.type == "datetimestartEnd") {
            item.binddata = [res.data.feedStartTime, res.data.feedEndTime];
          }
        }
      });
    });
  }

  function getSelList() {
    axios.post("/hisPointFeed/listAllNames", {
      flag: false
    }).then((res) => {
      state.options.queryList.querys.forEach((item) => {
        if (item.field == "condition") {
          item.options = res.data;
        }
      });
    });
    searchareaTree().then((res) => {
      state.options.queryList.querys.forEach((item) => {
        if (item.field == "area") {
          item.options = res.data;
        }
      });
    });
  }

  function getconditionList(dataObj) {
    axios
      .post("/hisPointFeed/conditionList", dataObj)
      .then((res) => {
        state.options.queryList.querys.forEach((item) => {
          if (item.type == "cascaderRadioSpecial") {
            item.options = res.data;
          }
        });
      });
  }
  getconditionList(state.areaObj)
  getSelList();
  // 跳转实时馈电异常页面
  const goPage = () => {
    router.push({
      path: '/lb/sskdyc'
    })
  }
  // 关闭曲线
  const closeChart = () => {
    state.listBtnType = undefined
    state.showChart = false
  }
  onMounted(() => {

  });
</script>
<style lang="scss" scoped>
  .xiazai {
    position: absolute;
    top: 42px;
    right: 110px;
    width: 120px;
    height: 64px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    background-color: #ffff;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    border-radius: 2px;
    z-index: 99;

    .item {
      width: 100%;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .item:hover {
      background-color: #ececec;
    }
  }

  ::v-deep .el-drawer {
    .querycss {
      .fsc {
        &:nth-child(2) {
          display: none;
        }
      }
    }

    .table_box {
      .fsc {
        display: none;
      }
    }
  }
</style>